<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="编辑基地"></u-navbar> -->
		<view class="pl-3">
			<u-form :model="form">
				<u-form-item required label-width="150" label="基地名称" prop="baseName">
					<u-input class="mr-3 " v-model="form.baseName" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="联系人" prop="contacts">
					<u-input class="mr-3 " v-model="form.contacts" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="联系电话" prop="phone">
					<u-input class="mr-3 " v-model="form.phone" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="基地位置" prop="baseAddress">
					<u-input class="mr-3 " v-model="form.baseAddress" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="基地面积(m²)" prop="baseArea">
					<u-input class="mr-3 " v-model="form.baseArea" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="产品介绍" prop="productIntroduce">
					<u-input class="mr-3 " v-model="form.productIntroduce" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="图片上传" prop="fileList">
					<u-upload ref="uUpload" :file-list="fileList" :max-size="4 * 1024 * 1024"
						:form-data="{'biz':'temp'}" :header="header" @on-success="uploadSuccess"
						:action="getUploadUrl()" max-count="1"></u-upload>
				</u-form-item>
				<view class="font-12 text-999999 pl-1">图片限制不能超过4MB</view>
			</u-form>
		</view>

		<ferrButton title=" 保存基地信息" @click="baseEditing"></ferrButton>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	export default {
		components: {
			ferrButton
		},
		data() {
			return {

				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				confirmType: "",
				confirmText: '',
				header: $H.getTokenHeader(),
				form: {
					baseAddress: "",
					baseArea: "",
					baseName: "",
					basePhoto: "",
					contacts: "",
					id: "",
					phone: "",
					productIntroduce: ""
				}
			}
		},
		computed: {
			confirmTitle() {
				return this.confirmType == 'username' ? '新增基地信息' : '新增基地信息'
			},
			fileList() {
				if (Array.isArray(this.form.basePhoto) && this.form.basePhoto.length > 0) {
					return this.form.basePhoto;
				} else {
					return [];
				}
			}
		},

		onLoad(options) {
			const id = options.id;
			this.NewListDetail(id)
		},
		methods: {
			// 拼接图片地址
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			NewListDetail(id) {
				$H.get('/agriculture/baseInform/queryById', {
					id: id
				}, {}).then(res => {
					this.form = res.result;
					if (res.result && res.result.basePhoto) {
						this.form.basePhoto = [{
							url: this.getFullImageUrl(res.result.basePhoto)
						}];
					} else {
						this.form.basePhoto = [];

					}
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},

			getUploadUrl(url) {
				return $H.getFullUrl('/sys/common/upload');
			},
			uploadSuccess(response) {
				if (response.code === 0) {
					uni.showToast({
						title: '图片上传成功',
						icon: 'none'
					});

					// Check if basePhoto already contains an image, replace it with the new one
					if (this.form.basePhoto.length > 0) {
						this.form.basePhoto[0] = {
							url: response.data,
							message: response.message
						};
					} else {
						// If basePhoto is empty, add the new image
						this.form.basePhoto.push({
							url: response.data,
							message: response.message
						});
					}
				} else {
					uni.showToast({
						title: response.message || '图片上传失败',
						icon: 'none'
					});
				}
			},




			baseEditing(id) {
				let files = this.$refs.uUpload.lists.filter(val => val.progress == 100);

				// Ensure there's at least one file, otherwise use default photo URL
				let basePhotoUrl = this.form.basePhoto.length > 0 ? this.form.basePhoto.map(item => item.url).join(',') :
					''; // Default value
				if (files.length > 0) {
					basePhotoUrl = files[0].response && files[0].response.message ? files[0].response.message :
						basePhotoUrl;
				}

				// Combine existing form data with the new basePhotoUrl
				let o = {
					...this.form,
					id: this.form.id,
					basePhoto: basePhotoUrl,
				};

				const userId = $U.getStorage("id");

				$H.post(`/agriculture/baseInform/agriculture/edit`, o, {})
					.then((res) => {
						if (res.code === 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 4000
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 4000);
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					})
					.catch(() => {
						uni.showToast({
							title: '编辑失败',
							icon: 'none',
						});
					});
			}



		}
	}
</script>

<style>
</style>